<template>
  <div class="myinfo">
    <van-nav-bar
      title="个人信息"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"

    />
    <div class="bg">
      <!-- 头像 -->
      <van-image class="tx" round width="5rem" height="5rem" :src="userFace" />
      <div>
        <span>{{ username }}</span>
      </div>
      <div style="padding-bottom: 3%">
        <span style="color: aqua">可可喜欢家，家喜欢干净</span>
      </div>
    </div>
    <!-- 详细信息 -->
    <div>
      <van-cell-group>
        <van-cell v-model="realname" title="姓名" value="" />
        <van-cell v-model="email" title="邮箱" value="" />
        <van-cell v-model="telephone" title="电话" value="" />
        <van-cell v-model="idCard" title="身份证号码" value="" />
        <van-cell v-model="bankCard" title="银行卡号" value="" />
      </van-cell-group>
    </div>
    <!-- 证件图片 -->
    <div class="zj">
      <div><span>身份证正面照：</span></div>
      <br />
      <van-image width="350" height="250"  :src="idcardPhotoPositive" />
      <br />
      <div><span>身份证反面照：</span></div>
      <br />
      <van-image width="350" height="250" :src="idcardPhotoNegative" />
      <br />
      <div><span>银行卡照片：</span></div>
      <br />
      <van-image width="350" height="250" :src="bankCardPhoto" />
      <br />
    </div>
  </div>
</template>

<script>
import { get, post } from "@/http/axios";
export default {
  data() {
    return {
      userFace: "",
      username: "",
      realname: "",
      gender: "",
      email: "",
      telephone: "",
      idCard: "",
      bankCard: "",
      idcardPhotoPositive: "",
      idcardPhotoNegative: "",
      bankCardPhoto: "",
      infos: [],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    async getmyinfo() {
      let res = await get("/user/info", {
        token: localStorage.getItem("token"),
      });
      console.log(res.data);

      this.username = res.data.data.username;
      this.realname = res.data.data.realname;
      this.email = res.data.data.email;
      this.idCard = res.data.data.idCard;
      this.userFace = res.data.data.userFace;
      this.telephone = res.data.data.telephone;
      this.bankCard = res.data.data.bankCard;
      this.idcardPhotoPositive = res.data.data.idcardPhotoPositive;
      this.idcardPhotoNegative = res.data.data.idcardPhotoNegative;
      this.bankCardPhoto = res.data.data.bankCardPhoto;
    },
  },
  created() {
    this.getmyinfo();
  },
};
</script>

<style scoped>
.zj {
  margin-top: 3%;
  text-align: center;
}
.bg {
  height: 40%;
  text-align: center;
  background-image: linear-gradient(#4568dc, #b06ab3);
}
</style>